<template>
  <v-chart class="chart" :option="option" autoresize theme="dark" />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineExpose, defineProps } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const option = ref({
  title: {
    left: "center",
    top: 5,
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  backgroundColor: "rgba(0, 0, 0, 0)",
  legend: {
    top: "30%",
    left: "right",
    type: "scroll",
    orient: "vertical",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["70%", "80%"],
      center: ["40%", "55%"],
      data: [],

      itemStyle: {
        borderColor: "rgba(0, 0, 0,)",
        borderRadius: "1.7px;",
      },
      labelLine: {
        show: false,
      },
      label: {
        normal: {
          show: true,
          position: "center",
          color: "#4c4a4a",
          formatter: "{active|报警总次数}" + "\n\r" + "{total|" + 100 + "}",
          rich: {
            total: {
              fontSize: 35,
              fontFamily: "微软雅黑",
              color: "#ffffff",
            },
            active: {
              fontFamily: "微软雅黑",
              fontSize: 16,
              color: "#ffffff",
              lineHeight: 30,
            },
          },
        },
        emphasis: {
          //中间文字显示
          show: true,
        },
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0)",
        },
      },
    },
  ],
});

const setData = (data) => {
  const richs = {};
  data.color.forEach((cl, index) => {
    richs["value" + index] = {
      width: 40,
      align: "right",
      color: cl,
      fontFamily: "Medium",
      fontSize: 19,
    };
  });
  const gap = data.total / 300;
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "rgba(54,92,76)",
    },
  };
  const sData = [];
  data.data.forEach((item, index) => {
    sData.push({
      ...item,
      itemStyle: {
        borderRadius: 100,
        color: data.color[index],
        borderWidth: 4,
        borderColor: "rgba(54,92,76)",
        // shadowBlur: 10,
        // shadowColor: data.color[index],
      },
    });
    if (data.data.length === 1) {
      sData.push(gapData);
    }
  });
  option.value = {
    color: data.color,
    grid: {
      left: "0%",
      right: "0%",
      bottom: "0%",
      top: "0%",
      containLabel: true,
    },
    backgroundColor: "rgba(0, 0, 0, 0)",
    title: {
      text: data.title,
      left: "center",
    },
    tooltip: {
      trigger: "item",
      // formatter: "{b} : {c} ({d}%)",
      formatter: "{b} : {c}",
    },
    legend: {
      top: data.top || "20%",
      left: "60%",
      type: "scroll",
      orient: "vertical",
      align: "left",
      icon: "circle",
      itemWidth: 9,
      selectedMode: false,
      textStyle: {
        align: "left",
        verticalAlign: "middle",
        rich: {
          name: {
            width: 90,
            color: "#fff",
            fontSize: 14,
            fontFamily: "Noto Sans CJK SC",
          },
          value: {
            width: 20,
            align: "right",
            color: "#",
            fontFamily: "Medium",
            fontSize: 15,
          },
          ...richs,
        },
      },
      data: data.data,
      formatter: (name) => {
        if (data.data.length) {
          let index;
          let value;
          for (var i = 0, l = data.data.length; i < l; i++) {
            if (data.data[i].name == name) {
              value = data.data[i].value;
              index = i;
            }
          }
          return `{name|${name}}{value${index}| ${value}}`;
        }
      },
    },
    series: [
      {
        name: "InsiderPieBorder",
        radius: ["62%", "68%"],
        center: ["33%", "55%"],
        type: "pie",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "rgba(54,92,76)",
          },
        },
        avoidLabelOverlap: false,
        hoverAnimation: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        label: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        data: [
          {
            value: 0,
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: { show: false },
            },
          },
        ],
      },
      {
        name: "InsiderPieBorder",
        radius: ["82%", "88%"],
        center: ["33%", "55%"],
        type: "pie",
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: "rgba(54,92,76)",
          },
        },
        avoidLabelOverlap: false,
        hoverAnimation: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        label: {
          show: false,
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
        data: [
          {
            value: 0,
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              emphasis: { show: false },
            },
          },
        ],
      },
      {
        name: "",
        type: "pie",
        radius: ["68%", "82%"],
        center: ["33%", "55%"],
        label: {
          normal: {
            show: true,
            position: "center",
            color: "#4c4a4a",
            formatter:
              "{total|" +
              data.total +
              "}" +
              "\n\r" +
              "{active|" +
              data.center +
              "}",
            rich: {
              total: {
                fontSize: 32,
                fontFamily: "微软雅黑",
                color: "#31EFFB",
              },
              active: {
                fontFamily: "微软雅黑",
                fontSize: 14,
                color: "#ffffff",
                lineHeight: 30,
              },
            },
          },

          emphasis: {
            //中间文字显示
            show: data.center,
          },
        },
        data: sData,
        labelLine: {
          show: false,
        },
        // color: ["#10F3A7", "#FF5F55"],
        itemStyle: {
          // borderColor: "rgba(0, 0, 0)",
          // borderWidth: 6,
          borderRadius: "15px;",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0)",
          },
        },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  height: 180px;
}
</style>
